<template>
    <div class="">
         <!-- 引入返回导航 -->
        <mt-header title="农庄活动" fixed>
            <mt-button slot="left" icon="back" @click="handleBack"></mt-button>
        </mt-header>
        <!-- 轮播图  :url="lunboUrl"-->
        <my-swipe></my-swipe>
        <div class="photo-list tmpl">
        <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="isAutoFill" ref="loadmore">
            <ul class="mui-table-view mui-grid-view">
                <li v-for="img in prods" :key="img.id" class="photo-listli">
                    <router-link :to="{name:'photo.detail',params:{id:img.id} }">
                         <!-- <img :src="img.img_url"> -->
                         <!-- 懒加载 -->
                         <img class="photo-listliimg_ngg" v-lazy="img.images">
                        <p>
                            <span v-text="img.title" class="titleing"></span>
                            <br>
                            <span v-text="img.zhaiyao" class="zhaiyaoing"></span>
                            <br>
                            <span v-text="img.tese" class="teseing"></span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </mt-loadmore>
        <div value="" id="btnSendSms" @click="loadmoreConcat" :class="btnclass">{{btnSendSms}}</div>
        </div>
        <br>
        <br>
        <br>
        <br>
    </div>
</template>
<script>
export default {
    data(){
        return {
            // lunboUrl:'',//轮播图url
            pageIndex:1,//页码
            rowsIndex:10,//每页显示条数
            prods:[],//商品列表数据
            allLoaded:true, //是否禁止触发上拉函数
            isAutoFill:false,//是否自动触发上拉函数
            btnSendSms:'',
            btnclass:'mui-icon icon-xiangxiajiantoubb',
        }
    },
    created(){
        this.loadMore();//1
    },
    methods:{
        handleBack(){
                this.$router.go(-1); //根据浏览器记录返回上一次
            },
        loadBottom(){
            //console.log('上啦触发了');
            this.loadmoreConcat();
        },
        loadMore(){
             //发起请求获取数据填充到页面
            this.$ajax.get('?tbname=activity&onpage=1&rows='+ this.rowsIndex)
            .then(res=>{
                this.prods = res.data.rows;
                if(res.data.total != this.rowsIndex){
                    //数据不到10条，就是剩余的所有了
                    // this.allLoaded = true;//禁止调用上拉函数了
                    this.btnclass = 'notclickn';
                    this.btnSendSms = '已经没有更多';
                }
            })
            .catch(err=>{
                console.log(err);
            });
        }, //追加数据
        loadmoreConcat(){
             this.$ajax.get('?tbname=activity&onpage=1&rows='+ this.rowsIndex + '&page='+ (++this.pageIndex))
            .then(res=>{
                
                //判断是否还有数据
                if(res.data.rows.length != this.rowsIndex){
                    //数据不到10条，就是剩余的所有了
                    // this.allLoaded = true;//禁止调用上拉函数了
                    this.btnclass = 'notclickn';
                    this.btnSendSms = '已经没有更多';
                }else{
                    this.prods = this.prods.concat(res.data.rows);
                    // console.log(this.$refs.loadmore.onBottomLoaded());
                }
                // 通知上啦操作已经完结
                this.$refs.loadmore.onBottomLoaded();

            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
}



</script>
<style>
#btnSendSms {
    width: 100%;clear:both;height: 50px;line-height: 50px; margin-top: 10px;
    text-align:center;
        color: #999;
}
.notclickn {
    pointer-events: none;
}
.photo-header li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

.photo-header ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}


/*下面的图片*/

.photo-listli {
    list-style: none;
    position: relative;
    margin-bottom: 50px;
}

.photo-listliimg_ngg {
    width: 100%;
    /*height: 230px;*/
    vertical-align: top;
}

.photo-list ul {
    padding-left: 0px;
    margin: 0;
}

.photo-list p {
    margin-bottom: 0px;
}

.titleing {
    font-weight: bold; font-size: 14px;color: black;
    margin-left: 5px;
}
.zhaiyaoing {
    color: green; font-size: 16px;
}
.teseing {
     font-size: 13px;color: black;
}
/*图片懒加载的样式*/
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

</style>
